<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body> 

<h5 class="text-center text-monospace">分群结果</h5>
<div class="container">
  <div class="card-columns mb-3" >
  	{% for group in result %}
  		{% if group|length > 5 %}
  			<div class="card bg-secondary">
  		{% elif group|length == 2 %}
  			<div class="card bg-danger">
  		{% elif group|length == 0 %}
			<div class="card bg-warning"> <li class="list-group-item">虚位以待</li>
  		{% else %}
			<div class="card bg-primary">
  		{% endif %}
  			<ul class="list-group list-group-flush">
  				{% for i in group %}
  					<li class="list-group-item">{{ i }}</li>
  				{% endfor %}
  			</ul>
  		</div>
  	{% endfor %}
  </div>
</div>
</body>
</html>